.spectrum-ColorArea {
  position: relative;
  display: inline-block;
  inline-size: var(--spectrum-colorarea-default-width);
  block-size: var(--spectrum-colorarea-default-height);
  min-inline-size: var(--spectrum-colorarea-min-width);
  min-block-size: var(--spectrum-colorarea-min-height);

  border-radius: var(--spectrum-colorarea-border-radius);

  cursor: default;

  user-select: none;

  &.is-focused,
  &.focus-ring {
    z-index: 2;

    .spectrum-ColorArea-handle {
      /* Bigger handle when focused */
      width: calc(var(--spectrum-colorhandle-size) * 2);
      height: calc(var(--spectrum-colorhandle-size) * 2);
    }
  }

  &.is-disabled {
    pointer-events: none;
  }

  /* the floating inset box shadow must be a separate element since <canvas> won't take it */
  &:before {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: var(--spectrum-colorarea-border-radius);
  }
}

.spectrum-ColorArea-handle.spectrum-ColorArea-handle {
  left: 0;
  top: 0;
  margin: 0;

  &:focus-within {
    z-index: 2;
  }
}

.spectrum-ColorArea-slider {
  opacity: 0.0001;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
